<template>
  <el-dialog v-model="drawer" title="领用记录" :append-to-body="true" width="660px" @close="close">
    <el-table size="small" :data="list" border>
        <el-table-column label="活动名称" prop="marketName"></el-table-column>
        <el-table-column label="领用人" prop="userName"></el-table-column>
        <el-table-column label="领用时间" prop="createTime"></el-table-column>
        <el-table-column label="领用数量" prop="number"></el-table-column>
        <el-table-column label="用途" prop="remark"></el-table-column>
    </el-table>
    <div class="page-block">
        <el-pagination
            v-model:currentPage="search.current"
            :small="true"
            :disabled="false"
            :background="false"
            layout="total, prev, pager, next, jumper"
            :total="total"
            :hide-on-single-page="true"
            @current-change="handleCurrentChange"
        />
    </div>
  </el-dialog>
</template>

<script>
import { computed, reactive, toRefs, watch } from 'vue'
import api from '/@/api/commonApi'

export default {
    name: 'PromotionRecord',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        id: {
            type: String,
            default: null
        }
    },
    emits: ['update:dialogDrawer'],
    setup(props, context) {
        const { dialogDrawer, id } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const state = reactive({
            list: [],
            search: {
                current: 1,
                size: 10
            },   
            total: 0
        })
        const handleCurrentChange = e => {
            state.search.current = e
            getList()
        }
        const getList = () => {
            state.search.productId = id.value
            api.productLogList(state.search).then(res => {
                state.list = res.data.records
                state.total = res.data.total
            })
        }
        watch(() => dialogDrawer.value,
            val => {
                if(val) {
                    getList()
                }
            }
        )

        return {
            ...toRefs(state),
            drawer,
            close,
            handleCurrentChange,
            getList,
        }
    }
}
</script>

<style>

</style>